<template>
    <div id="app" class="box">
        <div class="login-wrap ">
            <el-row type="flex" justify="center">

                <el-form ref="loginForm" :model="user" status-icon label-width="80px" :rules="rules">
                    <div class="num">&nbsp;</div>
                    <i class="el-icon-house"></i>
                    <h3>用户登录</h3>
                    <!-- <hr> -->
                    <el-form-item prop="username" label="用户名">
                        <el-input icon="el-icon-search" v-model="user.username" placeholder="请输入用户名"
                            prefix-icon="el-icon-user"></el-input>
                    </el-form-item>

                    <el-form-item id="password" prop="password" label="密码">
                        <el-input v-model="user.password" show-password placeholder="请输入密码" prefix-icon="el-icon-lock">
                        </el-input>
                    </el-form-item>
                    <el-form-item class="doLogin">
                        <el-button type="primary" @click="doLogin('loginForm')" style="width:100px;height: 30px;">登 录
                        <!-- <el-button type="primary" @click="doLogin('loginForm')" style="width:100px;height: 30px;">登 录 -->

                        </el-button>
                        <el-button type="primary" style="width:100px;height: 30px;">注册</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
    name: "logo",
    data() {
    var  usernamePass = (rule, value, callback) => {
            // let username=/^[^\d][0-9a-zA-Z_]{4,9}$/  
            let reg = /^[^\d][0-9a-zA-Z_]{4,9}$/
            if (reg.test(value)) {
                callback()
            } else {
                callback(new Error('用户名5-10个字母数字下划线组成,不以数字开头'))
            }

            // if(value === ''){
            //     callback(new Error('用户名5-10个字母数字下划线组成,不以数字开头'))
            // }else{
            //    if(this.ruleForm.checkPass!== ''){
            //     this.$refs.loginForm.validateField('checkPass')
            //    }
            // }
            // callback()
        }
          var   passwordPass = (rule, value, callback) => {
                // let username=/^[^\d][0-9a-zA-Z_]{4,9}$/  
                let reg = /^(?=.*[A-Z])|(?=.*[@#$&])[A-Za-z0-9@#$&]{6,15}$/ 
                if (reg.test(value)) {
                    callback()
                } else {
                    callback(new Error('用户名5-10个字母数字下划线组成,不以数字开头'))
                }

                // if(value === ''){
                //     callback(new Error('用户名5-10个字母数字下划线组成,不以数字开头'))
                // }else{
                //    if(this.ruleForm.checkPass!== ''){
                //     this.$refs.loginForm.validateField('checkPass')
                //    }
                // }
                // callback()
            }


        return {
            form: {},
            user: {
                username: "",
                password: ""
            },
            rules: {
                //密码验证
                password: [
                    { required: false, message: '请输入密码', trigger: 'blur' },
                    {
                        trigger: 'blur',
                        // validator: (rule, value, callback) => {
                        //     var passwordreg = /^(?=.*[A-Z])|(?=.*[@#$&])[A-Za-z0-9@#$&]{6,15}$/   //?=.*正则断言
                        //     // var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]){6,15}/   //?=.*正则断言
                        //     if (!passwordreg.test(value)) {
                        //         callback(new Error('密码必须由数字、至少一个字母或特殊字符组合,请输入6-15位'))
                        //     } else {
                        //         callback()
                        //     }
                        // }
                        validator: passwordPass
                    }
                ],
                username: [
                    { required: false, massage: '请输入用户名', trigger: 'blur' },
                    {
                        trigger: 'blur',
                        // validator:(rule,value,callback)=>{
                        //     let username=/^[^\d][0-9a-zA-Z_]{4,9}$/  
                        //     if(!username.test(value)){
                        //         callback(new Error('用户名5-10个字母数字下划线组成,不以数字开头'))
                        //     }else{
                        //         callback()
                        //     }
                        // }
                        validator: usernamePass

                    }
                ]
            }


        };
    },
    methods: {
        //登录按钮
        // doLogin() {
        //     if (!this.user.username && !this.user.password) {
        //         this.$message.error("请输入账号密码！");
        //         // return;
        //     } else if (!this.user.password) {
        //         this.$message.error("请输入密码！");
        //         // return;
        //     } else if(!this.user.username ){
        //         this.$message.error("请输入账号！");
        //     }

        //     else {
        //         //校验用户名和密码是否正确;
        //         // this.$router.push({ path: "/personal" });
        //         this.$axios.get("/hello", {
        //             username: this.user.username,
        //             password: this.user.password
        //         })
        //             .then((res, req) => {
        //                 // console.log("输出response.data.status", res.data);
        //                 console.log(this.username)
        //                 // console.log("输出response.data.status", res.data);
        //                 if (res.config.username== res.data.user[0].username&&res.config.password==res.data.user[0].password) {
        //                     console.log(  this.$router)
        //                     this.$router.push({ path: "/layout" });
        //                 } else {
        //                     //服务器的用户名
        //                     // console.log(res.data.user[0].username)
        //                     //输入框的用户名和密码
        //                     // console.log(res.config.password)
        //                     // console.log(res.config.username)
        //                     this.$message.error('账号密码错误');
        //                 }
        //             }).catch(err => {
        //                 console.log(err, 'err')

        //             });
        //     }
        // },
        doLogin(formNode) {
            //判断表单元素是否都验证成功
            this.$refs[formNode].validate((valid) => {
                if (valid) {
                    this.$axios.post('/login', {
                        username: this.user.username,
                        password: this.user.password
                    }).then(res => {
                        //缓存登录状态 用jscookie把数据存到Cookie
                        if (res.data.res) {
                            this.$router.push({ path: "/layout" });
                            this.$JsCookie.set('name', '3');
                        
                    //   console.log(  Vue.prototype.$JsCookie.get('name'))
                        }
                    }).catch(err => {
                        console.error(err)
                    })
                }
            })
        },
        //注册
        users() {
            console.log(this.user.username)
            callback(new Error('请输入数字值'));
        },
            onTest(){
                //调用Mutations中的函数修改数据
                this.$store.commit('setIsLogin',true)
            }

    },
    computed: {

    }


}
</script>
<style lang="less" scoped>
* {
    margin: 0px;
    padding: 0px;
}

.box::before {
    content: "";
    display: table;
}

.box::after {
    content: "";
    display: table;
}

#app {
    background: url(../../../static/login_center_bg.png) no-repeat center center;
    background-color: rgb(64, 158, 255);
    height: 280px;
    position: relative;
    top: 100px;


    .login-wrap {
        margin: auto;
        margin-top: -30px;

        // background-color: red;

        .el-form {
            height: 350px;
            filter: drop-shadow(5px 5px 5px rgb(197, 196, 196));

            .num {
                background-color: rgb(64, 158, 255);
                height: 10px;
                border-radius: 15px;

            }

            //房子
            .el-icon-house {
                color: rgb(64, 158, 255);
                font-size: 45px;
                margin-left: 159px;
            }

            background-color: rgb(255, 253, 253);

            h3 {
                color: rgb(64, 158, 255);
                text-align: center;
            }

            .el-form-item {
                margin: 30px;

            }


        }
    }
}
</style>